<template>
    <div>
        <table-v2 :data="config.tableData" :columns="config.tableColoumns" />
        <pagination-com />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useTable } from '@/composeAPI/useTable.ts'
import $api from '@/api'
const { state: config, getTableData } = useTable()
const tableColoumns = ref<any>([{
    dataKey: 'name',
    key: 'name',
    title: '姓名',
    width: 150
}, {
    dataKey: 'address',
    key: 'address',
    title: '地址',
    width: 150
}, {
    dataKey: 'age',
    key: 'age',
    title: '年龄',
    width: 150
}, {
    dataKey: 'email',
    key: 'email',
    title: '邮箱',
    width: 150
}])
// 页码改变重新拉数据
watch(() => config.pageaTable, () => {
    getTableData()
}, {
    deep: true
})

onMounted(async () => {
    getTableData()
    config.tableColoumns = tableColoumns.value
    config.pageaTable = {
        // 当前页数
        currentPage: 1,
        // 每页显示条数
        pageSize: 10,
        // 总条数
        total: 0,
    }
})

</script>

<style scoped></style>